<template>
  <div class="facilityManagement">
    <!-- 设施信息设置 -->
    <el-row class="facilityManagement-a height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">{{facilityManagement.facilityDetail}}</span>
    </el-row>

    <el-row class="facilityManagement-b">
      <el-row class="facilityManagement-b-one">
        <el-col class="facilityManagement-b-name" :span="4">{{facilityManagement.facilityName}}</el-col>
        <el-col class="facilityManagement-b-text" :span="12">{{facilityInformation.facilityName}}</el-col>
      </el-row>
      <el-row class="facilityManagement-b-one">
        <el-col class="facilityManagement-b-name" :span="4">{{facilityManagement.telephone}}</el-col>
        <el-col class="facilityManagement-b-text" :span="12">{{facilityInformation.telephone}}</el-col>
      </el-row>
      <el-row class="facilityManagement-b-one">
        <el-col class="facilityManagement-b-name" :span="4">{{facilityManagement.address}}</el-col>
        <el-col class="facilityManagement-b-text" :span="12">{{facilityInformation.address}}</el-col>
      </el-row>
      <el-row class="facilityManagement-b-one">
        <el-col class="facilityManagement-b-name" :span="4">{{facilityManagement.phone}}</el-col>
        <el-col class="facilityManagement-b-text" :span="12">{{facilityInformation.phone}}</el-col>
      </el-row>
    </el-row>

    <el-row class="facilityManagement-c">
      <el-col :span="8">
        <Kt-button
          class="editBtn boxShadowButton"
          :size="size"
          :label="facilityManagement.facilityInformationEdit"
          @click="handleFacilityInformationEdit"
        ></Kt-button>
      </el-col>
      <el-col :span="8" align="center">
        <Kt-button
          class="setBtn boxShadowButton"
          :size="size"
          :label="facilityManagement.sensorSet"
          @click="handleSensorSet"
        ></Kt-button>
      </el-col>
      <el-col :span="8" align="right">
        <Kt-button
          class="setBtn boxShadowButton"
          :size="size"
          :label="facilityManagement.alphaSet"
          @click="handleAlphaSet"
        ></Kt-button>
      </el-col>
    </el-row>

    <!-- 报警色的设定 -->
    <el-row class="facilityManagement-d height40 facilityManagement-f">
      <span class="height40-span" style="margin-left:-35px">
          <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">{{facilityManagement.alertMessage}}</span>
       <Kt-button
          class="editBtn boxShadowButton"
          style="margin-left:100px"
          :size="size"
          :label="facilityManagement.alertColorEdit"
          @click="handleAlertColorEdit"
      ></Kt-button>

    </el-row>
    <el-row class="facilityManagement-e">
      <el-row class="facilityManagement-e-one">
        <el-col class="facilityManagement-e-div" :span="4">
          <div
            class="facilityManagement-e-div-commom facilityManagement-e-div-one"
            :style="messageColorStyle"
          ></div>
        </el-col>
        <el-col class="facilityManagement-e-name" :span="8">{{facilityManagement.messageColor}}</el-col>
        <!-- <el-col class="facilityManagement-e-text" :span="2">{{alarmInformation.messageColor}}</el-col> -->
        
      </el-row>
      <el-row class="facilityManagement-e-one">
         <!-- <el-col class="facilityManagement-e-text" :span="2">{{alarmInformation.earlyWarningColor}}</el-col> -->
        <el-col class="facilityManagement-e-div" :span="4">
          <div
            class="facilityManagement-e-div-commom facilityManagement-e-div-two"
            :style="earlyWarningColorStyle"
          ></div>
        </el-col>
        <el-col class="facilityManagement-e-name" :span="8">{{facilityManagement.earlyWarningColor}}</el-col>
       
      </el-row>
      <el-row class="facilityManagement-e-one">
        <!-- <el-col class="facilityManagement-e-text" :span="2">{{alarmInformation.alarmLanguageColor}}</el-col> -->
        <el-col class="facilityManagement-e-div" :span="4">
          <div
            class="facilityManagement-e-div-commom facilityManagement-e-div-three"
            :style="alarmLanguageColorStyle"
          ></div>
        </el-col>
        <el-col
          class="facilityManagement-e-name"
          :span="8"
        >{{facilityManagement.alarmLanguageColor}}</el-col>
        
      </el-row>
      <el-row class="facilityManagement-e-one">
         <el-col class="facilityManagement-e-div" :span="4">
          <div
            class="facilityManagement-e-div-commom facilityManagement-e-div-four"
            :style="alarmColorStyle"
          ></div>
        </el-col>
        <el-col class="facilityManagement-e-name" :span="8">{{facilityManagement.alarmColor}}</el-col>
        <!-- <el-col class="facilityManagement-e-text" :span="2">{{alarmInformation.alarmColor}}</el-col> -->
      </el-row>

      <!-- 强制停止 -->
      <el-row class="facilityManagement-e-one">
        <!-- <el-col class="facilityManagement-e-text" :span="2">{{alarmInformation.alarmColor}}</el-col> -->
        <el-col class="facilityManagement-e-div" :span="4">
          <div
            class="facilityManagement-e-div-commom facilityManagement-e-div-four"
            :style="stopColorStyle"
          ></div>
        </el-col>
        <el-col class="facilityManagement-e-name" :span="8">「アラート一覧」の強制停止表示色</el-col>
      </el-row>

      <el-row class="facilityManagement-e-one">
        <!-- <el-col class="facilityManagement-e-text" :span="2">{{alarmInformation.alarmColor}}</el-col> -->
        <el-col class="facilityManagement-e-div" :span="4">
          <div
            class="facilityManagement-e-div-commom facilityManagement-e-div-four"
            :style="offlineColorStyle"
          ></div>
        </el-col>
        <el-col class="facilityManagement-e-name" :span="8">センサートラブルの表示色</el-col>
      </el-row>
    </el-row>
    <el-row class="facilityManagement-f">
      <!-- <el-col :span="12">
        <Kt-button
          class="editBtn2 boxShadowButton"
          :size="size"
          :label="facilityManagement.alertColorEdit"
          @click="handleAlertColorEdit"
        ></Kt-button>
      </el-col>
      <el-col :span="12" align="right">
        <Kt-button
          class="setBtn boxShadowButton"
          :size="size"
          :label="facilityManagement.alphaSet"
          @click="handleAlphaSet"
        ></Kt-button>
      </el-col> -->
    </el-row>

    <!-- //強制停止フォント設定 -->
    <el-row class="facilityManagement-g height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">強制停止フォント設定</span>
    </el-row>
    <el-row>
      <el-form
        label-position="top"
        style="margin-left:40px;margin-top:20px"
        class="demo-ruleForm">
        <el-row class="staffCompile-a">
          <el-form-item label="フォントサイズ設定" prop="stopfontsize">
            <p class="span-input" :style="{'font-size':12+2*stopfontsize+'px'}">強制停止中巡回強化</p>
          </el-form-item>
        </el-row>
      </el-form>
     </el-row>
    


    <!-- 楼栋以及楼层的设置 -->
    <el-row class="facilityManagement-g height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">{{facilityManagement.buildFloor}}</span>
    </el-row>
    <el-row class="facilityManagement-h">
      <el-col :span="24">
        <Kt-button
          class="editBtn3 boxShadowButton"
          icon="el-icon-circle-plus-outline"
          :size="size"
          :label="facilityManagement.buildFloorAdd"
          @click="handleBuildFloorAdd"
        ></Kt-button>
      </el-col>
    </el-row>
    <el-row class="facilityManagement-i clearfix">
      <div v-for="(item,index) in buildFloorList" :key="index" class="facilityManagement-i-div">
        <el-row class="facilityManagement-i-div-one">
          <el-col :span="20" align="right">
            <Kt-button
              class="deleteBtn boxShadowButton"
              :size="size"
              :label="facilityManagement.buildFloorDelete"
              @click="handleBuildFloorDelete(item.buildingId)"
            ></Kt-button>
          </el-col>
        </el-row>
        <el-row class="facilityManagement-i-div-two">
          <el-col align="center" :span="12">{{facilityManagement.buildName}}</el-col>
          <el-tooltip class="item" effect="dark" :content="item.buildingName" placement="bottom">
            <el-col align="center" :span="12">{{item.buildingName}}</el-col>
          </el-tooltip>
        </el-row>
        <!-- <el-row class="facilityManagement-i-div-three">
          <el-col align="center" :span="12">{{facilityManagement.floorName}}</el-col>
          <el-col align="center" :span="12">{{item.floorNum}}</el-col>
        </el-row>-->
      </div>
    </el-row>

    <el-row>
      <el-col style="display:flex;align-items: center;margin-bottom:10px;"><div class="border"></div><h3>{{ipManager.title}}</h3></el-col>
    </el-row>
    <el-row class="marginlr50">
        <el-col class="com_font">{{ipManager.text1}}</el-col>
    </el-row>
    <el-row class="marginlr50">
        <el-row class="bluebg">
            <el-col style="display:flex;margin-bottom:10px;color:#409EFF">
                <i class="el-icon-circle-plus pointer" style="margin-top:3px;" @click="showoneDialog"><span style="margin-left:8px">{{ipManager.text2}}</span></i>
                <div style="display:block;margin-top:0px;margin-left:15px">
                    <div style="display:flex" v-for="(item,index) in ipAddrVoList" :key="item.id">
                        <span class="ip_msg_txt">{{item.ip}}</span>
                        <span class="pointer" @click="oneDelete(index)">{{ipManager.delete}}</span>
                    </div>
                </div>
            </el-col>
            <el-col style="display:flex;margin-bottom:10px;color:#409EFF">
                <i class="el-icon-circle-plus pointer" style="margin-top:3px;" @click="showtwoDialog"><span style="margin-left:8px">{{ipManager.text3}}</span></i>
                <div style="display:block;margin-top:0px;margin-left:15px">
                    <div style="display:flex" v-for="(item,index) in ipSegmentVoList" :key="item.id">
                        <span class="ip_msg_txt">{{item.ipSegment}}</span>
                        <span class="pointer"  @click="twoDelete(index)">{{ipManager.delete}}</span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-col class="com_font top80">{{ipManager.text4}}</el-col>
        <el-col style="margin-top:8px">
            <el-button icon="el-icon-circle-plus" @click="showthreeDialog">{{ipManager.text5}}</el-button>
        </el-col>
    </el-row>

    <el-row class="marginlr50">
        <div style="margin-top:10px;width:100%">
            <div class="tablegreen" style="display:flex" v-if="ipUserVoList.length!=0">
                <span class="ip_msg_txt" style="font-size:15px">{{ipManager.text5}}</span>
            </div>
            <div class="tablewhite" style="display:flex" v-for="(item,index) in ipUserVoList" :key="item.id">
                <span class="ip_msg_txt" style="flex:1">{{item.loginName}}</span>
                <span class="pointer" style="color:#409EFF;width:160px;text-align:center" @click="threeDelete(index)">{{ipManager.delete}}</span>
            </div>          
        </div>
        <el-col class="line"></el-col>
    </el-row>

    <el-row class="marginlr50" style="display:flex;margin-top:15px">
        <el-button type="primary" style="width:120px" @click="btmedit">{{isEdit?ipManager.enter:ipManager.fix}}</el-button>
        <el-button type="info" style="width:120px;margin-left:60px" @click="isEdit = false">{{ipManager.cancel}}</el-button>
    </el-row>

    <el-dialog
      :title="ipManager.dialogonetitle"
      :visible.sync="showOneDialog"
      :center="true"
      width="550px"
      >
      <el-row class="marginlr50" style="display:flex;margin-top:15px;align-items: center;">
        <h3 style="text-align: center">{{ipManager.dialogonelabel}}</h3>
        <el-input style="width:260px;margin-left:10px" v-model="oneInput" maxlength="20"></el-input>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button  class="deleteBtn" @click="oneDialogClick">{{ipManager.yes}}</el-button>
        <el-button  @click="showOneDialog = false">{{ipManager.no}}</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="ipManager.dialogtwotitle"
      :visible.sync="showTwoDialog"
      :center="true"
      width="680px">
      <el-row class="marginlr50" style="display:flex;margin-top:15px;align-items: center;">
        <h4 style="text-align: center">{{ipManager.dialogtwolabel}}</h4>
        <el-input style="width:160px;margin-left:10px"  v-model="twoInputLeft" maxlength="15"></el-input>
        <h3 style="margin-left:5px;margin-right:5px">-</h3>
        <el-input style="width:160px;" v-model="twoInputRight" maxlength="15"></el-input>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button class="deleteBtn" @click="twoDialogClick">{{ipManager.yes}}</el-button>
        <el-button @click="showTwoDialog = false">{{ipManager.no}}</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="ipManager.dialogthreetitle"
      :visible.sync="showThreeDialog"
      width="880px"
      class="el-transfer"
      :close-on-click-modal='false'
      :center="true">
      <el-transfer
        style="text-align: left;display: block;"
        v-model="threeValue"
        :titles="['追加するユーザを下から選択：', 'IPログインに制限されていない ユーザ：']"
        :button-texts="['削除', '追加']"
        :data="threeData">
    </el-transfer>
      <span slot="footer" class="dialog-footer">
        <el-button  class="deleteBtn" @click="threeDialogClick">{{ipManager.yes}}</el-button>
        <el-button  @click="showThreeDialog = false">{{ipManager.no}}</el-button>
      </span>
    </el-dialog>

    <!-- 删除弹窗 -->
    <!-- 删除 -->
    <el-dialog
      :title="deleteTitle"
      :visible.sync="deleteDialogVisible"
      width="30%"
      :center="true"
    >
      <h3 style="text-align:center">{{deleteContent}}</h3>
      <span slot="footer" class="dialog-footer">
        
        <el-button
          class="deleteBtn boxShadowButton"
          @click="deletFun"
          :size="size"
        >{{ipManager.yes}}</el-button>

        <el-button
          class="cancelBtn boxShadowButton"
          :size="size"
          @click="deleteDialogVisible = false"
        >{{ipManager.no}}</el-button>

      </span>
    </el-dialog>

    <el-dialog
      :title="facilityManagement.alphaSet1"
      :visible.sync="alphaDialogVisible"
      :center="true"
      :close-on-click-modal='false'
      width="620px"
    >
      <div class="Ckplayer">
        <img :src="mohuimg" height="340" width="560" />
      </div>
      <div class="alphablock">
        <el-slider :min="0" :max="7" v-model="alphaValue" @change="handleChangeSlider"></el-slider>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="setBtn boxShadowButton"
          type="primary"
          @click="handDialogEnter"
          :size="size"
        >{{facilityManagement.enter}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import KtButton from "@/components/KtButton";
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
import juxing_Small from "../../../assets/lifeGroupimg/juxing_small.png";
import mohu0img from "../../../assets/lifeGroupimg/realVideo0.jpg";
import mohu1img from "../../../assets/lifeGroupimg/realVideo1.jpg";
import mohu2img from "../../../assets/lifeGroupimg/realVideo2.jpg";
import mohu3img from "../../../assets/lifeGroupimg/realVideo3.jpg";
import mohu4img from "../../../assets/lifeGroupimg/realVideo4.jpg";
import mohu5img from "../../../assets/lifeGroupimg/realVideo5.jpg";
import mohu6img from "../../../assets/lifeGroupimg/realVideo6.jpg";
import mohu7img from "../../../assets/lifeGroupimg/realVideo7.jpg";

export default {
  name: "FacilityManagement",
  data() {
    return {
      facilityManagement: this.$t("m.facilityManagement"), //引入 lang 里面的字符串资源,
      size: "mini", //按钮的尺寸
      image: { juxing_Small },
      alphaDialogVisible: false, //模糊度设置弹窗
      alphaValue: 0,
      ipManager: this.$t('m.ipManager'),//引入 lang 里面的字符串资源,
      showOneDialog:false,
      showTwoDialog:false,
      showThreeDialog:false,
      isEdit:false,
      deleteDialogVisible:false,
      deleteTitle:'',
      deleteIndex:0,
      deleteContent:'',
      deleteFlag:'',
      deleteBuildId:'',
      mohuimg:mohu1img,
      oneInput:"",
      twoInputLeft:"",
      twoInputRight:"",
      ipAddrVoList:[],
      ipSegmentVoList:[],
      ipUserVoList:[],
      threeValue:[],
      threeData:[],
      stopfontsize:'0',
      facilityInformation: {
        facilityName: "",
        telephone: "",
        address: "",
        phone: ""
      },

      alarmInformation: {
        messageColor: "绿",
        earlyWarningColor: "黄",
        alarmLanguageColor: "赤",
        alarmColor: "青"
      },
      messageColorStyle: {
        backgroundColor: ""
      },
      earlyWarningColorStyle: {
        backgroundColor: ""
      },
      alarmLanguageColorStyle: {
        backgroundColor: ""
      },
      alarmColorStyle: {
        backgroundColor: ""
      },
      stopColorStyle:{
         backgroundColor: ""
      },
      offlineColorStyle:{
        backgroundColor: ""
      },
      buildFloorList: [],
      acceptLanguage: "ja_JP" //数据请求传参需要传的语言  ja_JP----日文
    };
  },
  methods: {
    /* ----- 设施信息设置  ------- */
    /* 
      设施信息的编辑
    */
    handleFacilityInformationEdit() {
      bus.$emit("homePage", {
        type: "jump",
        path: "/FacilityInformationEdit",
        title: this.facilityManagement.facilityInformationEdit
      });
    },
    //获取员工列表
    getAllUser(){
      this.$postJson("uac/group/getDeptTreeByGroupId/"+sessionStorage.getItem("groupId"),{
      }).then(res =>{
          if(res.code == 200){
            var userList = [];
            var empVoList = res.result[0].empVoList;
            for(var i=0;i<empVoList.length;i++){
              userList.push({
                key:empVoList[i].userId,
                label:empVoList[i].userName
              })
            }
            var subDept = res.result[0].subDept;
            for(var i=0;i<subDept.length;i++){
              for(var j=0;j<subDept[i].empVoList.length;j++){
                userList.push({
                  key:subDept[i].empVoList[j].userId,
                  label:subDept[i].empVoList[j].userName
                })
              }
            }
            this.threeData = userList;
          }
      })
    },
    showtwoDialog(){
          if(this.isEdit){
            this.showTwoDialog = true;
            this.twoInputLeft = "";
            this.twoInputRight = "";
          }else{
          this.$message({message:this.ipManager.pleaseEdit,type:"error"});
          }
    },
    showoneDialog(){
          if(this.isEdit){
            this.showOneDialog = true;
            this.oneInput = "";
          }else{
          this.$message({message:this.ipManager.pleaseEdit,type:"error"});
          }
    },
    showthreeDialog(){
          if(this.isEdit){
            this.showThreeDialog = true;
            this.threeValue = [];
            for(var i=0;i<this.ipUserVoList.length;i++){
              this.threeValue.push(
                this.ipUserVoList[i].userId
              )
            }
          }else{
          this.$message({message:this.ipManager.pleaseEdit,type:"error"});
          }
    },
    btmedit(){
        this.isEdit = !this.isEdit;
    },
    //点击单ip删除按钮
    oneDelete(index){
       if(!this.isEdit){
          this.$message({message:this.ipManager.pleaseEdit,type:"error"});
          return;
       }
       this.deleteDialogVisible = true;
       this.deleteIndex = index;
       this.deleteTitle = this.$t('m.deleteTitle');
       this.deleteContent = this.ipManager.confirmDelete;
       this.deleteFlag = "oneDelete";
       return;
      
    },
    //点击双ip的删除按钮
    twoDelete(index){
       if(!this.isEdit){
          this.$message({message:this.ipManager.pleaseEdit,type:"error"});
          return;
       }
       this.deleteDialogVisible = true;
       this.deleteIndex = index;
       this.deleteTitle = this.$t('m.deleteTitle');
       this.deleteContent = this.ipManager.confirmDelete;
       this.deleteFlag = "twoDelete";
       return;
      
    },
    //点击多个ip添加的删除按钮
    threeDelete(index){
       if(!this.isEdit){
          this.$message({message:this.ipManager.pleaseEdit,type:"error"});
          return;
       }
       this.deleteDialogVisible = true;
       this.deleteIndex = index;
       this.deleteTitle = this.$t('m.deleteTitle');
       this.deleteContent = this.ipManager.confirmDelete;
       this.deleteFlag = "threeDelete";
       return;
    },
    oneDialogClick(){
      if(this.oneInput.trim().length == 0){
        //请输入ip地址
        this.$message({message:"IPを入力してください",type:"error"});
        return;
      }
      var ipAddrVoList = [];
      for(var i=0;i<this.ipAddrVoList.length;i++){
        ipAddrVoList.push({
          ip:this.ipAddrVoList[i].ip,
          number:i
        })
      }
      ipAddrVoList.push({
          ip:this.oneInput,
          number:this.ipAddrVoList.length
      })
      var params = {
        ipAddrVoList:ipAddrVoList,
        ipSegmentVoList:this.ipSegmentVoList,
        ipUserVoList:this.ipUserVoList
      }
      this.$postJson("uac/ip/setIpAuth",params).then(res =>{
        if(res.code==200){
            this.showOneDialog = false;
            this.$message({message:res.message,type:"success"});
            this.getIPInfo();
        }else{
            this.$message({message:res.message,type:"error"});
        }
      })
    },
    twoDialogClick(){
      if(this.twoInputLeft.trim().length == 0){
        this.$message({message:"IPを入力してください",type:"error"});
        return;
      }
       if(this.twoInputRight.trim().length == 0){
        this.$message({message:"IPを入力してください",type:"error"});
        return;
      }
      var ipSegmentVoList = [];
      for(var i=0;i<this.ipSegmentVoList.length;i++){
        ipSegmentVoList.push({
          ipSegment:this.ipSegmentVoList[i].ipSegment,
          number:i
        })
      }
      ipSegmentVoList.push({
          ipSegment:this.twoInputLeft+"-"+this.twoInputRight,
          number:this.ipSegmentVoList.length
      })
      console.log(ipSegmentVoList);
      var params = {
        ipAddrVoList:this.ipAddrVoList,
        ipSegmentVoList:ipSegmentVoList,
        ipUserVoList:this.ipUserVoList
      }
      this.$postJson("uac/ip/setIpAuth",params).then(res =>{
        if(res.code==200){
            this.showTwoDialog = false;
            this.$message({message:res.message,type:"success"});
            this.getIPInfo();
        }else{
            this.$message({message:res.message,type:"error"});
        }
      })
    },
    threeDialogClick(){
      var checkList = [];
      for(var j=0;j<this.threeValue.length;j++){
        checkList.push({
          userId:this.threeValue[j],
          number:j
        })
      }
      var params = {
        ipAddrVoList:this.ipAddrVoList,
        ipSegmentVoList:this.ipSegmentVoList,
        ipUserVoList:checkList
      }
      this.$postJson("uac/ip/setIpAuth",params).then(res =>{
        if(res.code==200){
            this.showThreeDialog = false;
            this.$message({message:res.message,type:"success"});
            this.getIPInfo();
        }else{
            this.$message({message:res.message,type:"error"});
        }
      })
    },
    getIPInfo(){
          this.$postForm("uac/ip/getIpAuth",{}).then(res =>{
              this.ipAddrVoList = res.result.ipAddrVoList;
              this.ipSegmentVoList = res.result.ipSegmentVoList;
              this.ipUserVoList = res.result.ipUserVoList;
          })
    },
    /* 
      传感器的设定
    */
    handleSensorSet() {
      bus.$emit("homePage", {
        type: "jump",
        path: "/FacilitySensorSet",
        title: this.facilityManagement.facilitySensorSet
      });
    },
    getAlpha(){
      this.$postJson('omc/lifeAmbiguity/select',{},
         this.acceptLanguage).then(res =>{
           if(res.code == 200 && res.result.length!=0){
             var storeAlpha = res.result[0].ambiguity;
             if (Number(storeAlpha) == null) {
                storeAlpha = 0;
            }else {
              storeAlpha = Number(storeAlpha);
            }
             sessionStorage.setItem("videoAlpha", storeAlpha);
           }
      });

    },
    /* ----- 视频模糊度设定 ------ */
    handleAlphaSet() {
      // 1 .获取当前模糊度
      // 2.请求成功后弹窗
      var storeAlpha = sessionStorage.getItem("videoAlpha");
      console.log(storeAlpha);
      if (Number(storeAlpha) == null) {
        this.alphaValue = 0;
      } else {
        this.alphaValue = Number(storeAlpha);
      }
      this.alphaDialogVisible = true;
      if(this.alphaValue == 0){
        this.mohuimg = mohu0img;
      }else if(this.alphaValue == 1){
        this.mohuimg = mohu1img;
      }else if(this.alphaValue == 2){
        this.mohuimg = mohu2img;
      }else if(this.alphaValue == 3){
        this.mohuimg = mohu3img;
      }else if(this.alphaValue == 4){
        this.mohuimg = mohu4img;
      }else if(this.alphaValue == 5){
        this.mohuimg = mohu5img;
      }else if(this.alphaValue == 6){
        this.mohuimg = mohu6img;
      }else{
        this.mohuimg = mohu7img;
      }
    },
    handleChangeSlider(value) {
      console.log(value);
      this.alphaValue = value;
      if(this.alphaValue == 0){
        this.mohuimg = mohu0img;
      }else if(this.alphaValue == 1){
        this.mohuimg = mohu1img;
      }else if(this.alphaValue == 2){
        this.mohuimg = mohu2img;
      }else if(this.alphaValue == 3){
        this.mohuimg = mohu3img;
      }else if(this.alphaValue == 4){
        this.mohuimg = mohu4img;
      }else if(this.alphaValue == 5){
        this.mohuimg = mohu5img;
      }else if(this.alphaValue == 6){
        this.mohuimg = mohu6img;
      }else{
        this.mohuimg = mohu7img;
      }
    },
    handDialogEnter() {
      console.log(this.alphaValue);
      //omc/lifeAmbiguity/add
      this.$postJson('omc/lifeAmbiguity/add',
        {ambiguity:this.alphaValue},
         this.acceptLanguage).then(res =>{
           console.log(res);
           })
      sessionStorage.setItem("videoAlpha", this.alphaValue);
      this.alphaDialogVisible = false;
    },
    /* 
      报警色设定
    */
    handleAlertColorEdit() {
      bus.$emit("homePage", {
        type: "jump",
        path: "/FacilityAlarmColor",
        title: this.facilityManagement.facilityAlarmColor
      });
    },

    /* ----- 楼栋以及楼层设置 ----- */

    handleBuildFloorAdd() {
      bus.$emit("homePage", {
        type: "jump",
        path: "/FacilityBuildFloorAdd",
        title: this.facilityManagement.facilityBuildFloorAdd
      });
    },

    /* 
      查询机构信息
    */
    queryGroupInfo() {
      this.$postForm(
        this.ports.facilityManagement.queryGroupInfo,
        {},
        this.acceptLanguage
      ).then(res => {
        console.log(res);
        if (res.code == 200) {
          if (res.result != null) {
            this.facilityInformation.facilityName = res.result.groupame;
            this.facilityInformation.telephone = res.result.contactPhone;
            this.facilityInformation.address = res.result.detailAddress;
            this.facilityInformation.phone = res.result.addressPhone;
          }
        }
      });
    },

    /* 
      获取报警颜色
    */
    queryAlarmColor() {
      this.$postForm(
        this.ports.facilityManagement.queryAlarmColor,
        {},
        this.acceptLanguage
      ).then(res => {
        console.log(res);
        if (res.code == 200) {
          if (res.result != null) {
            res.result.forEach(item => {
              if (item.hintTypeId == 1) {
                this.messageColorStyle.backgroundColor = item.color;
              } else if (item.hintTypeId == 2) {
                this.earlyWarningColorStyle.backgroundColor = item.color;
              } else if (item.hintTypeId == 3) {
                this.alarmLanguageColorStyle.backgroundColor = item.color;
              } else if (item.hintTypeId == 4) {
                this.alarmColorStyle.backgroundColor = item.color;
              } else if(item.hintTypeId == 5){
                this.offlineColorStyle.backgroundColor = item.color;
              } else if(item.hintTypeId == 6){
                this.stopColorStyle.backgroundColor = item.color;
                this.stopfontsize = item.fontSize;
              }
            });
          }
        }
      });
    },
    /* 
      获取所有的楼栋
    */
    showAllBuild() {
      this.$postForm(
        this.ports.facilityManagement.showAllBuild,
        {},
        this.acceptLanguage
      ).then(res => {
        console.log(res);
        if (res.result != null) {
          this.buildFloorList = res.result;
        } else {
          this.buildFloorList = [];
        }
      });
    },
    deletFun(){
      //1.删除ip,单个
      if(this.deleteFlag == "oneDelete"){
        var ipAddrVoList = [];
          for(var i=0;i<this.ipAddrVoList.length;i++){
            if(i!=this.deleteIndex){
              ipAddrVoList.push({
                ip:this.ipAddrVoList[i].ip,
                number:i
              })
            }
          }
          var params = {
            ipAddrVoList:ipAddrVoList,
            ipSegmentVoList:this.ipSegmentVoList,
            ipUserVoList:this.ipUserVoList
          }
          this.$postJson("uac/ip/setIpAuth",params).then(res =>{
            if(res.code==200){
                this.showOneDialog = false;
                this.deleteDialogVisible = false;
                this.$message({message:res.message,type:"success"});
                this.getIPInfo();
            }else{
                this.$message({message:res.message,type:"error"});
            }
          })
          //2.删除双ip限制
      }else if(this.deleteFlag == "twoDelete"){
          var ipSegmentVoList = [];
           for(var i=0;i<this.ipSegmentVoList.length;i++){
             if(i!=this.deleteIndex){
                ipSegmentVoList.push({
                  ipSegment:this.ipSegmentVoList[i].ipSegment,
                  number:i
                })
             }
           }
          var params = {
            ipAddrVoList:this.ipAddrVoList,
            ipSegmentVoList:ipSegmentVoList,
            ipUserVoList:this.ipUserVoList
          }
          this.$postJson("uac/ip/setIpAuth",params).then(res =>{
            if(res.code==200){
                this.showOneDialog = false;
                this.deleteDialogVisible = false;
                this.$message({message:res.message,type:"success"});
                this.getIPInfo();
            }else{
                this.$message({message:res.message,type:"error"});
            }
          })
          //3.删除多个ip的那个弹窗添加的内容
      }else if(this.deleteFlag == "threeDelete"){
        var ipUserVoList = [];
           console.log(this.ipUserVoList);
           for(var i=0;i<this.ipUserVoList.length;i++){
             if(i!=this.deleteIndex){
                ipUserVoList.push({
                  userId:this.ipUserVoList[i].userId,
                  number:i
                })
             }
           }
          console.log(ipUserVoList);
          var params = {
            ipAddrVoList:this.ipAddrVoList,
            ipSegmentVoList:this.ipSegmentVoList,
            ipUserVoList:ipUserVoList
          }
          this.$postJson("uac/ip/setIpAuth",params).then(res =>{
            if(res.code==200){
                this.showOneDialog = false;
                this.deleteDialogVisible = false;
                this.$message({message:res.message,type:"success"});
                this.getIPInfo();
            }else{
                this.$message({message:res.message,type:"error"});
            }
          })
          //4.删除楼栋
      }else if(this.deleteFlag=="buildDelete"){
          let params = new Object();
          params.buildingId = this.deleteBuildId;
          console.log(params);
          this.$postForm(
            this.ports.facilityManagement.deleteBuild,
            params,
            this.acceptLanguage
          ).then(res => {
            console.log(res);
            if (res.code == 200) {
              this.showAllBuild();
              this.deleteDialogVisible = false;
              this.$message({ message: res.message, type: "success" });
              bus.$emit("delete_Build"); //删除了楼栋通知房间一览刷新楼栋信息
            } else {
              this.$message({ message: res.message, type: "error" });
            }
          });
      }
    },
    /* 
      楼栋的删除
    */
    handleBuildFloorDelete(buildingId) {
      console.log(buildingId);
      this.deleteDialogVisible = true;
      this.deleteBuildId = buildingId;
       this.deleteTitle = this.$t('m.deleteTitle1');
       this.deleteContent = this.$t("m.deleteMessage");
       this.deleteFlag = "buildDelete";
       return;
    }
  },
  created() {},
  mounted() {
    this.getAlpha();
    this.queryGroupInfo();
    this.showAllBuild();
    this.getIPInfo();
    this.getAllUser();
    this.queryAlarmColor();
    bus.$on("refreshBuild", () => {
      this.showAllBuild();
    });
    bus.$on("refreshGroupInfo", () => {
      this.queryGroupInfo();
    });
    bus.$on("refreshAlarmColor", () => {
      this.queryAlarmColor();
    });
  },
  destroyed() {
    bus.$off("refreshBuild");
    bus.$off("refreshGroupInfo");
    bus.$off("refreshAlarmColor");
  },
  components: {
    KtButton
  }
};
</script>
<style lang="scss" scoped>
.alphablock {
  width: 560px;
  margin: 0 auto;
}
.Ckplayer {
  margin: 0 auto;
  width: 560px;
  height: 360px;
  position: relative;
}
#pixi {
  width: 100%;
  height: 375px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.filter-blur7 {
  filter: blur(7px) grayscale(100%) opacity(50%);
}
.filter-blur6 {
  filter: blur(6px) grayscale(100%);
}
.filter-blur5 {
  filter: blur(5px) grayscale(100%);
}
.filter-blur4 {
  filter: blur(4px) grayscale(100%);
}
.filter-blur3 {
  filter: blur(3px) grayscale(100%) contrast(150%);
}
.filter-blur2 {
  filter: blur(2px) grayscale(100%) contrast(150%);
}
.filter-blur1 {
  filter: blur(1px) grayscale(100%);
}
.filter-blur0 {
  filter: blur(0px);
}
.border{
    width: 10px;
    height: 30px;
    background: black;
    margin-right: 10px;
}
.marginlr50{
 margin: 5px 30px;
}
.com_font{
    font-size: 18px;
    color: #333333;
}
.top80{
    margin-top: 40px;
}
.bluebg{
    background: #ECF5FF;
    border-radius: 10px;
    width: 100%;
    padding: 10px 20px;
}
.line{
    margin-top: 40px;
    border-bottom:1px dashed gray;
}
.pointer{
    cursor: pointer;
}
.deleteBtn {
  background: #dddddd;
  color: #010101;
  border-radius: 5px;
}
.ip_msg_txt{
    font-size: 15px;
    color: #222222;
    min-width: 160px;
    margin: 0px 5px;
}
.tablewhite{
    border: 1px solid rgb(207, 207, 207);
    background: white;
    border-radius: 5px;
    padding: 5px;
}
.tablegreen{
    border: 1px solid #ECF5FF;
    background: #ECF5FF;
    border-radius: 5px;
    padding: 5px;
}
.el-transfer /deep/ .el-transfer-panel{
  width: 350px;
}
.el-transfer /deep/ .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label{
  font-size: 14px;
}
.el-transfer /deep/ .el-checkbox{
  display: block;
}
/* 修改element-ui input文本框默认的样式 */
/deep/ .staffCompile-a .el-input__inner {
  border: none !important;
  border-radius: 0px !important;
  width: 200px;
  color: #333333;
  background-color: #f6f6f6 !important;
}
/deep/ .staffCompile-a .el-select {
  border: 1px solid #cccccc;
  border-radius: 5px;
  margin-top: 10px;
}
/* 修改每一个form表单小项的margin */
/deep/ .staffCompile-a .el-form-item {
  margin-bottom: 22px !important;
}

/* 修改element-ui 表格label的样式 */
/deep/ .staffCompile-a .el-form-item__label {
  padding: 0 0 0px !important;
  line-height: 10px !important;
  color: #0000ff !important;
}

/* 修改element-ui input文本框默认的样式 */
/deep/ .staffCompile-b .el-input__inner {
  border: none !important;
  border-radius: 0px !important;
  width: 200px;
  border-bottom: 1px solid #999999 !important;
  background-color: #f6f6f6 !important;
}

/* 修改每一个form表单小项的margin */
/deep/ .staffCompile-b .el-form-item {
  margin-bottom: 22px !important;
}

/* 修改element-ui 表格label的样式 */
/deep/ .staffCompile-b .el-form-item__label {
  padding: 0 0 0px !important;
  line-height: 10px !important;
  color: #0000ff !important;
}

.facilityManagement {
  padding-bottom: 20px;
  .height40 {
    height: 40px;
    line-height: 40px;
    .height40-span {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: 700;
      img {
        vertical-align: middle;
        margin-right: 15px;
      }
    }
  }
  .facilityManagement-b {
    padding: 30px 35px;
    .facilityManagement-b-one {
      height: 40px;
      line-height: 40px;
      .facilityManagement-b-name {
        color: #999999;
      }
      .facilityManagement-b-text {
        color: #333333;
      }
    }
  }
  .facilityManagement-c,
  .facilityManagement-f {
    width: 90%;
    padding: 20px 35px 35px 35px;
    .editBtn,
    .editBtn2 {
      background: #67c23a;
      color: #ffffff;
    }
    .editBtn3 {
      background: #ffffff;
      color: #7d7d7d;
    }
    .setBtn {
      background: #409eff;
      color: #ffffff;
    }
  }
  .facilityManagement-e {
    padding: 30px 35px;
    .facilityManagement-e-one {
      height: 40px;
      line-height: 40px;
      .facilityManagement-e-name {
        color: #999999;
      }
      .facilityManagement-e-text {
        color: #333333;
      }
      .facilityManagement-e-div {
        .facilityManagement-e-div-commom {
          text-align: center;
          width: 80px;
          height: 25px;
          line-height: 25px;
          margin-top: 7px;
        }
        .facilityManagement-e-div-one {
          // background: #22ac38;
          border: 1px solid #ccc;
        }
        .facilityManagement-e-div-two {
          // background: #f9d004;
          border: 1px solid #ccc;
        }
        .facilityManagement-e-div-three {
          // background: #ff0000;
          border: 1px solid #ccc;
        }
        .facilityManagement-e-div-four {
          // background: #3a77e2;
          border: 1px solid #ccc;
        }
      }
    }
  }
  .facilityManagement-h {
    padding: 20px 35px;
  }
  .facilityManagement-i {
    padding: 0px 35px;
    .facilityManagement-i-div {
      float: left;
      width: 31%;
      margin: 2% 2% 1% 0;
      // height: 180px;
      height: 120px;
      border: 1px solid #cccccc;
      border-radius: 5px;
      .facilityManagement-i-div-one {
        height: 60px;
        line-height: 60px;
        background: #ffffff;
        border-radius: 5px;
        .deleteBtn {
          background: #dddddd;
          color: #000000;
        }
      }
      .facilityManagement-i-div-two,
      .facilityManagement-i-div-three {
        height: 60px;
        line-height: 60px;
        border-top: 1px solid #cccccc;
      }
      /deep/ .facilityManagement-i-div-two .el-tooltip {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .span-input{
    border: 1px solid #cccccc;
    border-radius: 5px;
    width: 290px;
    margin-top: 10px;
    padding: 10px;
  }
}
</style>